<template>
  <div id="vsChart">
    <vue-datepicker-local v-model="emptyTime" clearable  :placeholder="'请选择时间范围'" />
    <moreLineEcharts v-if="signDate.length" class="line" :xAxis="signDate" :title="title" :opData="opData"></moreLineEcharts>
    <loading v-if="isShow && signDate.length== 0"></loading>
    <noSearch v-if="!isShow && signDate.length == 0"></noSearch>
  </div>

</template>
<script>
  import { apiSigns } from '@/api/api'  //引入体征列表数据
  import { standardDate } from "@/components/common/date"; //引入时间转换JS
  import VueDatepickerLocal from '@/components/datepicker/VueDatepickerLocal'
  import moreLineEcharts from '@/components/echarts/moreLineEcharts'
  import loading from '@/components/loading/loading'
  import noSearch from '@/components/search/noSearch' //导入没有搜索结果组件
  export default {
    data() {
      return {
        title: ['心率', '体温', '脉搏', '自主呼吸频率', '无创舒张压', '无创收缩压', '血氧饱和度'],
        opData: [],
        signDate: [],
        heartRateData: [],//心率
        animalHeatData: [],//体温
        sphygmusData: [],//脉搏,
        diastolicBloodPressureData: [],//舒张压
        systolicPressureData: [],//收缩压
        oxyhemoglobinSaturationData: [],//血氧饱和度
        breatheData: [],//呼吸
        isShow: true,
        emptyTime: [],
        startDate: "",
        endDate: ""
      }
    },
    watch: {
      emptyTime: {
        handler(curVal, oldVal) {
          if (standardDate(curVal[0]) == 'NaN-NaN-NaN' || standardDate(curVal[1]) == 'NaN-NaN-NaN') {
            this.startDate = '';
            this.endDate = '';
            this.isShow = true;
            this.signDate = [];
            this.getApiSigns();
          } else {
            this.startDate = standardDate(curVal[0]);
            this.endDate = standardDate(curVal[1]);
            this.isShow = true;
            this.signDate = [];
            this.getApiSigns();
          }
         
        }
      },
    },
    created() {
    },
    mounted() {
      this.getApiSigns();
      this.getopData();
    },
    methods: {
      getopData() {//设置曲线的值
        this.opData = [
          {
            name: '心率',
            type: 'line',
            symbol: 'emptycircle',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
            data: this.heartRateData
          },
          {
            name: '体温',
            type: 'line',
            symbol: 'emptycircle',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
            data: this.animalHeatData
          },
          {
            name: '脉搏',
            type: 'line',
            symbol: 'emptycircle',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
            data: this.sphygmusData
          },
          {
            name: '自主呼吸频率',
            type: 'line',
            symbol: 'emptycircle',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
            data: this.breatheData
          }
          ,
          {
            name: '无创舒张压',
            type: 'line',
            symbol: 'emptycircle',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
            data: this.diastolicBloodPressureData
          },
          {
            name: '无创收缩压',
            type: 'line',
            symbol: 'emptycircle',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
            data: this.systolicPressureData
          }
          ,
          {
            name: '血氧饱和度',
            type: 'line',
            symbol: 'emptycircle',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
            data: this.oxyhemoglobinSaturationData
          }
        ]
      },
      getApiSigns() {//后台请求数据
        apiSigns({
          patientID: this.$store.getters.ID,
          startDate: this.startDate,
          endDate: this.endDate,
          sort: "asc"
        })
          .then(res => {
            this.signDate = [];
            if (JSON.parse(res).Status == -1) {
              this.isShow = false;
            }
            if (JSON.parse(res).Status == 1) {
              for (var i = 0; i < JSON.parse(res).Data.length; i++) {
                this.signDate.push(this.filterDate(JSON.parse(res).Data[i]["时间"]));
                this.heartRateData.push(JSON.parse(res).Data[i]["心率"]);
                this.animalHeatData.push(JSON.parse(res).Data[i]["体温"]);
                this.sphygmusData.push(JSON.parse(res).Data[i]["脉搏"]);
                this.breatheData.push(JSON.parse(res).Data[i]["自主呼吸频率"]);
                this.diastolicBloodPressureData.push(JSON.parse(res).Data[i]["无创舒张压"]);
                this.systolicPressureData.push(JSON.parse(res).Data[i]["无创收缩压"]);
                this.oxyhemoglobinSaturationData.push(JSON.parse(res).Data[i]["血氧饱和度"]);
                //if (JSON.parse(res).Data[i]["心率"] != null) { this.heartRateData.push(JSON.parse(res).Data[i]["心率"]); }                
                //if (JSON.parse(res).Data[i]["体温"] != null) { this.animalHeatData.push(JSON.parse(res).Data[i]["体温"]); }
                //if (JSON.parse(res).Data[i]["脉搏"] != null) { this.sphygmusData.push(JSON.parse(res).Data[i]["脉搏"]); };
                //if (JSON.parse(res).Data[i]["自主呼吸频率"] != null) { this.breatheData.push(JSON.parse(res).Data[i]["自主呼吸频率"]); }
                //if (JSON.parse(res).Data[i]["无创舒张压"] != null) { this.diastolicBloodPressureData.push(JSON.parse(res).Data[i]["无创舒张压"]); };
                //if (JSON.parse(res).Data[i]["无创收缩压"] != null) { this.systolicPressureData.push(JSON.parse(res).Data[i]["无创收缩压"]); }
                //if (JSON.parse(res).Data[i]["血氧饱和度"] != null) { this.oxyhemoglobinSaturationData.push(JSON.parse(res).Data[i]["血氧饱和度"]); }
              }
              this.isShow = true;
            }

          })
          .catch(err => {
            this.$toast.center('当前请求接口有问题，请联系管理员！！')
          });
      },
      filterDate(time) {
        if (!time) {
          return '';
        }
        else {
          time = time.replace(/\//g, '-');
          time = time.replace(/T/g, ' ');
          return time.substring(5, 16);
        }
      },
    },
    components: {
      moreLineEcharts,
      loading,
      noSearch,
      VueDatepickerLocal
    },
  }
</script>
<style scoped>
  #vsChart {
    height: calc(100vh - 365px);
  }
    #vsChart .datepicker{
      position:absolute;
      top:-5px;
      right:170px;
    }
    .line {
      height: 100%;
    }

  #signsDetailsChart {
    height: calc(100% - 10px);
  }

    #signsDetailsChart .datepicker {
      position: absolute;
      top: -15px;
      right: 170px;
    }

    @media screen {
      #vsChart .datepicker{
        position: initial;
        top: initial;
        right: initial;
      }
    }
</style>
